<template>
	<!-- 圈子收费用户支付页面 -->
	<view class="main">
		<view class="find_list">
			<view class="find_item">
				<view class="top">
					<view class="one">
						<image :src="orgDetail.orgUrl" mode="aspectFill"></image>
					</view>
					<view class="two">
						<view class="first">
							{{orgDetail.orgName}}
						</view>
						<view class="srcond">
							{{orgDetail.orgIntroduce}}
						</view>
						<view class="three">
							<view class="item" v-for="(item,index) in orgDetail.friendsLists" :key="index">{{item}}</view>
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="left">
						<view class="one">
							<image :src="orgDetail.avatarUrl" mode="aspectFill"></image>
						</view>
						<view class="two">
							<view class="title">
								{{orgDetail.applyName}}
							</view>
							<view class="dest">
								{{orgDetail.company}}
							</view>
						</view>
					</view>
					<view class="right">
						<view class="imgs">
							<image :src="item" mode="aspectFill" v-for="(item,index) in orgDetail.userUrlList" :key="index" :class="[orgDetail.userUrlList.length == 3 ? 'imgsss' : 'imgss']">
						</view>
						<text>成员{{orgDetail.peopleNumber}}&nbsp;帖子{{orgDetail.postNumber}}</text>
					</view>
				</view>
			</view>
		</view>

		<view class="tishi" v-if="!is_rate && chargeType">
			（ 该圈子是周期收费圈子，周期为{{orgDetail.chargeCycle}}天，您需要支付以下金额的费用才能继续使用，为了避免影响您的使用，请及时续费 ）
		</view>
		<view class="tishi" v-if="!is_rate && !chargeType">
			（ 该圈子是收费圈子，您需要支付以下金额的费用才能加入 ）
		</view>
		<view class="tishi" v-if="is_rate">
			您已支付成功，返回圈子即可
		</view>
		<view class="money">
			收费金额: <text>{{orgDetail.chargeAmount}} 元</text>
		</view>
		<view class="row_btn" @tap="payRequest" v-if="!is_rate">
			微信支付
		</view>
		<navigator :url="'/pages/index/detail?id=' + circleId" class="row_btn btn1" v-if="is_rate" hover-class="none"
		 open-type="redirect">
			返回圈子
		</navigator>

		<!-- 续费成功弹窗 -->
		<view class="zhezhao" v-if="is_rate && is_pay">
			<view class="content">
				<view class="top">
					<image src="../../imges/xufeiyes.png" mode="aspectFill"></image>
					<image src="../../imges/cha.png" mode="aspectFill" class="guanbi" @tap="closeRate"></image>
				</view>
				<view class="tishi_">
					缴费成功
				</view>
				<view class="title">
					您已正式加入了“{{orgDetail.orgName}}圈”！
				</view>
				<view class="footer_btn" @tap="handleEnter">
					进入圈子
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import request from "../../utils/request.js";
var jweixin = require("jweixin-module");
export default {
  data() {
    return {
      imgs: ["", "", ""], //圈子成员头像数组
      is_rate: false, //缴费成功弹窗
      circleId: "",
      orgDetail: {},
      payDetail: {}, //支付参数
      oneLevelId: "", //一级用户
      secondLevelId: "", //二级用户
      chargeType: false,
      is_pay: true,
      socialId: "", //社交消息id
    };
  },
  onLoad(options) {
    if (options.socialId) {
      this.socialId = options.socialId;
    }
    this.circleId = options.id;
    if (options.oneLevelId) {
      this.oneLevelId = options.oneLevelId;
    }
    if (options.secondLevelId) {
      this.secondLevelId = options.secondLevelId;
    }
    this.handleDateil(); //详情
  },
  onHide() {
    this.is_rate = false;
    this.is_pay = true;
  },
  methods: {
    handleDateil() {
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/friendsHomeInfo",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            orgId: this.circleId,
          },
        }).then((res) => {
          // console.log(res, '圈子')
          if (res.data.code == 200) {
            if (res.data.data.userUrlList.length > 3) {
              res.data.data.userUrlList.length = 3;
            }
            // 续费
            if (
              res.data.data.isOrg == 0 &&
              res.data.data.isUserFriendsPay == 1
            ) {
              this.chargeType = true;
              // 缴费
            } else if (
              res.data.data.isOrg == 3 &&
              res.data.data.isUserFriendsPay == 1
            ) {
              this.chargeType = false;
            }
            this.orgDetail = res.data.data;
            this.getPayCode();
          } else if (res.data.code == 401) {
            uni.showToast({
              title: "登录失效，请重新授权",
              duration: 1500,
              icon: "none",
            });
            setTimeout(() => {
              uni.navigateTo({
                url: "/pages/index/index",
              });
            }, 10001);
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    getPayCode() {
      //获取支付参数
      let token = uni.getStorageSync("token");
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "app/orgCircle/pay",
          method: "POST",
          header: {
            "Content-Type": "application/json",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": "1.3.3",
            "Source-Type": 7,
            token: token,
          },
          data: {
            friendsId: this.circleId,
            money: String(this.orgDetail.chargeAmount),
            payWay: 4,
            token: token,
            firstDistribution: this.oneLevelId,
            secondDistribution: this.secondLevelId,
            socialId: this.socialId,
          },
        }).then((res) => {
          // console.log(res, '支付参数')
          if (res.data.code == 200) {
            this.payDetail = res.data.data.prepayDate;
          } else {
            // uni.showToast({
            // 	title: res.data.msg,
            // 	duration: 2000,
            // 	icon: 'none'
            // });
          }
        });
      }
    },
    payRequest() {
      // 支付函数
      let that = this;
      if (!that.payDetail.paySign) {
        return false;
      }
      if (!that.payDetail.timeStamp) {
        return false;
      }
      if (!that.payDetail.nonceStr) {
        return false;
      }
      request({
        //获取appid
        url: "wechat/portal/jsapiSignature/",
        method: "POST",
        header: {
          "Content-Type": "application/json",
          "api-client": "72e0fee8172411ea995200163e05ff66",
          "api-version": "1.3.3",
          "Source-Type": 7,
          // 'Referer' : 'https://test.yiqilaiwang.com'
        },
        data: {
          url: window.location.href.split("#")[0], //后台通过域名进行授权
        },
      }).then((res) => {
        if (res.statusCode == 200) {
          //获取成功
          jweixin.config({
            debug: false, // 开启调试模式，发布的时候改为false
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名
            jsApiList: ["chooseWXPay"], // 必填，需要使用的JS接口列表
          });

          jweixin.ready(function () {
            jweixin.checkJsApi({
              jsApiList: ["chooseWXPay"], // 需要检测的JS接口列表，所有JS接口列表见附录2,
              success: (res) => {
                //that.is_rate = true
                // console.log('支付成功')/
                // console.log(res);
              },
              fail: function (res) {
                // console.log('支付失败')
                // console.log(res);
              },
            });

            jweixin.chooseWXPay({
              appId: that.payDetail.appId,
              timestamp: that.payDetail.timeStamp,
              nonceStr: that.payDetail.nonceStr, // 支付签名随机串，不长于 32 位
              package: `prepay_id=${that.payDetail.prepay_id}`, //
              signType: "MD5", // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
              paySign: that.payDetail.paySign, // 支付签名
              success: function (res) {
                // console.log(res)
                var route = "payResult" + "?type=1";
                uni.navigateTo({
                  url: route,
                });
                that.is_rate = true;
              },
              cancel: function (r) {
                var route = "payResult" + "?type=2";
                uni.navigateTo({
                  url: route,
                });
              },
              fail: function (res) {
                console.log(res);
                var route = "payResult" + "?type=0";
                uni.navigateTo({
                  url: route,
                });
              },
            });
          });
          jweixin.error(function (res) {
            // uni.showToast({
            // 	icon: 'none',
            // 	title: '支付失败了',
            // 	duration: 4000
            // });
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            duration: 1500,
            icon: "none",
          });
        }
      });
    },
    closeRate() {
      //关闭缴费成功弹窗
      this.is_pay = false;
    },
    handleEnter() {
      //点击进入圈子
      uni.redirectTo({
        url: "/pages/index/detail?id=" + this.circleId,
      });
    },
  },
};
</script>

<style scoped lang="less">
.main {
  .zhezhao {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 520rpx;
      height: 564rpx;
      background: #ffffff;
      border-radius: 16rpx;
      overflow: hidden;

      .top {
        width: 520rpx;
        height: 260rpx;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 70%;
          height: 70%;
        }

        .guanbi {
          width: 22rpx;
          height: 22rpx;
          position: absolute;
          top: 25rpx;
          right: 25rpx;
        }
      }

      .tishi_ {
        // padding: 0 34rpx;
        width: 100%;
        text-align: center;
        font-size: 40rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #343434;
      }

      .title {
        width: 100%;
        box-sizing: border-box;
        padding: 0 38rpx;
        font-size: 29rpx;
        font-family: PingFang SC;
        font-weight: 550;
        color: #343434;
        line-height: 40rpx;
        margin-top: 20rpx;
        text-align: center;
      }

      .footer_btn {
        width: 328rpx;
        height: 86rpx;
        background: #2268eb;
        border-radius: 43rpx;
        margin: 25rpx auto;
        line-height: 86rpx;
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #ffffff;
        text-align: center;
      }
    }
  }

  .tishi {
    margin-top: -10rpx;
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #2268eb;
    line-height: 31rpx;
    // width: 100%;
    text-align: center;
    padding: 0 34rpx;
  }

  .money {
    // width: 100%;
    font-size: 40rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #343434;
    width: 100%;
    text-align: center;
    margin-top: 150rpx;

    text {
      margin-left: 30rpx;
    }
  }

  .row_btn {
    margin: 0 auto;
    margin-top: 100rpx;
    width: 340rpx;
    height: 89rpx;
    background: #23b556;
    border-radius: 44rpx;
    text-align: center;
    line-height: 89rpx;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
  }

  .btn1 {
    margin-top: 30rpx;
    background-color: #227ceb;
  }
}

.find_list {
  background: rgba(255, 255, 255, 1);
  padding: 32rpx 32rpx;
  border-top: 2rpx solid #eee;

  .find_item {
    // margin-top: 25rpx;
    width: 100%;
    height: 264rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 16rpx 1rpx rgba(0, 0, 0, 0.16);
    // border-radius: 12px;
    border-radius: 12rpx;
    padding: 20rpx;
    box-sizing: border-box;
    position: relative;

    .btn {
      width: 34rpx;
      height: 34rpx;
      position: absolute;
      top: 20rpx;
      right: 20rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .top {
      display: flex;

      .one {
        flex-shrink: 0;
        width: 96rpx;
        height: 96rpx;
        margin-right: 22rpx;

        image {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }

      .two {
        .first {
          font-size: 32rpx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
          line-height: 45rpx;
          text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
        }

        .srcond {
          width: 500rpx;
          overflow: hidden;
          margin-top: 5rpx;
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 33rpx;
          text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }

        .three {
          margin-top: 12rpx;
          display: flex;
          flex-wrap: wrap;
          width: 500rpx;
          height: 30rpx;
          overflow: hidden;

          .item {
            margin-top: 5rpx;
            height: 26rpx;
            overflow: hidden;
            margin-right: 12rpx;
            padding: 0 9rpx;
            box-shadow: 0px 2rpx 20rpx 0px rgba(0, 0, 0, 0.08);
            border-radius: 13rpx;
            font-size: 18rpx;
            line-height: 25rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
            white-space: nowrap;
            color: rgba(191, 108, 103, 1);
            background: rgba(255, 231, 228, 1);
          }
        }
      }
    }

    .bottom {
      display: flex;
      justify-content: space-between;
      width: 646rpx;
      position: absolute;
      left: 20rpx;
      bottom: 20rpx;
      padding-top: 18rpx;
      box-sizing: border-box;
      border-top: 2rpx solid #eee;

      .left {
        display: flex;

        .one {
          width: 60rpx;
          height: 60rpx;
          margin-right: 12rpx;

          image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }

        .two {
          .title {
            font-size: 24rpx;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 33rpx;
            text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

          .dest {
            position: relative;
            bottom: -6rpx;
            font-size: 20rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(136, 136, 136, 1);
            line-height: 28rpx;
            text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }
        }
      }

      .right {
        display: flex;
        margin-top: 18rpx;
        flex-shrink: 0;
        .imgs {
          display: flex;
          margin-right: 15rpx;
          image {
            height: 30rpx;
            width: 30rpx;
            border-radius: 50%;
          }

          image.imgsss:first-child {
            position: relative;
            right: -28rpx;
            z-index: 77;
          }

          image.imgsss:nth-child(2) {
            position: relative;
            right: -13rpx;
            z-index: 88;
          }

          image.imgsss:nth-child(3) {
            position: relative;
            z-index: 99;
          }

          // 两张图
          image.imgss:nth-child(1) {
            position: relative;
            right: -13rpx;
            z-index: 88;
          }

          image.imgss:nth-child(2) {
            position: relative;
            z-index: 99;
          }
        }

        text {
          font-size: 24rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(136, 136, 136, 1);
          line-height: 33rpx;
          text-shadow: 0px 2rpx 20rpx rgba(0, 0, 0, 0.08);
        }
      }
    }
  }
}
</style>
